<template>
  <div class="shoplist">
    <div class="header">
      <p>
        <span class="text1">商品名称:</span
        ><el-input
          v-model="searchValue.name"
          style="width: 200px"
          placeholder="请输入商品名称"
        />
      </p>
      <p>
        <span class="text1">商品分类:</span
        ><el-select
          v-model="searchValue.cate"
          placeholder="请选择商品类型"
          style="width: 200px"
        >
          <el-option label="全部" value="" />
          <el-option
            v-for="(item, idx) in ['生活用品', '保健用品', '食品类']"
            :key="item"
            :label="item"
            :value="idx + 1"
          />
        </el-select>
      </p>
      <p>
        <span class="text1">库存数量:</span
        ><el-select
          v-model="searchValue.inventory"
          placeholder="请选择商品库存"
          style="width: 200px"
        >
          <el-option label="全部" value="" />
          <el-option
            v-for="(item, idx) in ['生活用品', '保健用品', '食品类']"
            :key="item"
            :label="item"
            :value="idx + 1"
          />
        </el-select>
      </p>
      <p style="width: 100%">
        <span class="text1"></span>
        <el-button type="primary" @click="getlist">搜索</el-button>
        <el-button>重置</el-button>
        <el-button @click="dialogForm = true">添加商品</el-button>
        <el-button >重置</el-button>
        <el-button type="danger" plain @click="router.push('/index/addShop')">新建商品</el-button>
      </p>
    </div>
    <div class="table">
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="_id" label="ID" width="240" />
        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="old_price" label="原价" />
        <el-table-column prop="price" label="销售价" />
        <el-table-column prop="num" label="商品库存" />
        <el-table-column prop="cate" label="商品分类" />
      </el-table>
      <el-pagination
        @current-change="currentPage"
        style="padding-top: 20px"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
    <el-dialog v-model="dialogForm" title="添加商品" width="500">
      <el-input
        v-model="formData.name"
        placeholder="请输入商品名称"
        style="width: 100%; margin: 10px"
      />
      <el-input
        v-model="formData.old_price"
        placeholder="请输入商品原价格"
        style="width: 100%; margin: 10px"
      />
      <el-input
        v-model="formData.price"
        placeholder="请输入商品销售价格"
        style="width: 100%; margin: 10px"
      />
      <el-input
        v-model="formData.num"
        placeholder="请输入商品库存"
        style="width: 100%; margin: 10px"
      />
      <el-select
        v-model="formData.cate"
        placeholder="请选择商品库存"
        style="width: 100%; margin: 10px"
      >
        <el-option label="全部" value="" />
        <el-option
          v-for="item in cate"
          :key="item._id"
          :label="item.name"
          :value="item._id"
        />
      </el-select>
      <el-button @click="addShop">确认添加</el-button>
    </el-dialog>
  </div>
</template>

<script setup>
import { getData, postData } from "@/utils/way";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();

let list = ref([]);
let cate = ref([]);
let page = ref(1);
let total = ref(-1);
let dialogForm = ref(false);
let formData = ref({
  name: "",
  price: "",
  old_price: "",
  num: "",
  cate: "",
});
let searchValue = ref({
  name: "",
  cate: "",
  inventory: "",
});
let addShop = () => {
  let { data } = postData("/szh/addshop", { ...formData.value });
  if (data.code == 200) {
    ElMessage({
      message: "添加成功",
      type: "success",
    });
    dialogForm.value = false;
    getlist();
  }
};
let getlist = async () => {
  let { data } = await getData("/szh/shoplist?page=" + page.value);
  if (data.code == 200) {
    list.value = data.list;
    total.value = data.total;
    console.log(list.value);
  }
};
let getcate = async () => {
  let { data } = await getData("/szh/catelist");
  if (data.code == 200) {
    cate.value = data.list;
  }
};
let currentPage = (val) => {
  page.value = val;
  getlist();
};
onMounted(() => {
  getlist();
  getcate();
});
</script>

<style>
.shoplist > div {
  background-color: #fff;
  padding: 20px;
}
.shoplist {
  width: 100%;
}
.shoplist .header {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.header p {
  width: 25%;
  height: 50px;
  line-height: 50px;
}
.table {
  margin-top: 20px;
}
.text1 {
  width: 100px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
}
</style>